<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue基础</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-text="content"></p>
			<p v-html="content"></p>
		</div>

		<script>
			
			// v-html 的作用，设置元素的 innerHTML
			// 内容中有 HTML 结构会被解析为标签
			// v-text 无论文本是什么只会解析成文本
			// 解析文本使用 v-text, 解析 html 结构的使用 v-html
			
			var vm = new Vue({
				// Vue 实例的容器
				el: '#app',
				// 数据模型
				data: {
					// content: '百度'
					content:"<a href='http://www.baidu.com'> 百度 </a>"
				}
				
			});
		</script>

	</body>
</html>
